<template>
  <view class="invitation">
    <navBar :navbarData.sync="navbarData"></navBar>
    <view class="preface-roll" v-if="preface">
      <image style="width: 100%;"
        src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/InvitationGif.gif"
        mode="widthFix" @error="imgLoadFinish" @load="imgLoadFinish">
      </image>
      <view class="introduction-Wrap" @click="handlePreface">
        <image style="width:376rpx;height: 90rpx;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/copy.png" mode="widthFix">
        </image>
      </view>
    </view>
    <!-- 卡片滑动 -->
    <view class="invitation-swipper" :style="{opacity: loadFinish ? 1:0}">
      <!-- tips提示信息 -->
      <view :class="isIphoneX?'tips1624':'tips1334'">
        <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/huadong.png"
          mode="widthFix" style="width: 531rpx;height: 36rpx;" v-if="selectTitle == 0">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/yaoqing.png"
            mode="widthFix" style="width: 414rpx;height: 37rpx;" v-if="selectTitle == 1">
            <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/baocun.png"
              mode="widthFix" style="width: 578rpx;height: 37rpx;" v-if="selectTitle == 2">
      </view>
      <view :class="isIphoneX?'container1624':'container1334'">
        <!-- 左箭头 -->
        <view style="width: 66rpx;height: 66rpx;position: absolute;left: 20rpx;top: 44%;z-index: 999;" v-if="Toggle"
          @click="handleCopywritingL">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/left.png"
            mode="widthFix" style="width: 100%;height: 66rpx;">
        </view>
        <!-- 右箭头 -->
        <view style="width: 66rpx;height: 66rpx;position: absolute;right:20rpx;top: 44%;z-index: 999;" v-if="Toggle"
          @click="handleCopywritingR">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/right.png"
            mode="widthFix" style="width: 100%;height: 66rpx;">
        </view>
        <view class="flip-container">
          <!-- 时间地点 -->
          <view :style="{backgroundImage:'url('+inputTextImgbg+')'}"
            style="width: 400rpx;height: 124rpx;position: absolute;top: 65%;left:180rpx;z-index: 299;background-size: 100% 100%;"
            v-if="inputShow">
            <!-- 时间 -->
            <view style="width: 330rpx;height: 30rpx;position: absolute;left: 84rpx;top: -2rpx;" @click="handlePickers">
              <view style="width: 82rpx;height: 21rpx;position: absolute;top: -6rpx;left: 0;" v-if="timeShow">
                <image :src="timeImgpl" mode="widthFix" style="width: 100%;height: 100%;">
              </view>
              <view style="width: 100%;height: 100%;" class="timeView" :style="{color:color}">{{time}}</view>
            </view>
            <!-- 地点 -->
            <view style="width: 330rpx;height: 72rpx;position: absolute;left: 84rpx;top: 45rpx;">
              <view style="width: 82rpx;height: 21rpx;position: absolute;top: 0;left: 0;" v-if="LocationPlhord">
                <image :src="LocationImgpl" mode="widthFix" style="width: 100%;height: 100%;">
              </view>
              <view style="width: 100%;height: 100%;" class="textareaL" @click="handleLocations" :style="{color:color}">
                {{LocationInput}}
              </view>
              <input class="textareaIpnut" :style="{color:color}" maxlength="30" @confirm="setRemarksL"
                @input="changeContext" :focus="focus" @blur="handleLBlur"></input>
            </view>
          </view>
          <!-- 签名 -->
          <view
            style="width: 340rpx;display: flex;position: absolute;bottom: 12%;left: 45%;display: flex;align-items: center;height: 60rpx;z-index: 999;"
            v-if="inputShow" @click="handleNameF">
            <view style="width: 75rpx;height: 23rpx;">
              <image :src="fromImg" mode="widthFix" style="width:100%;height: 23rpx;">
            </view>
            <view class="textareaNamebox">
              <view style="width: 82rpx;height: 21rpx;position: absolute;top: 0;left: 0;" v-if="fromPL">
                <image :src="nameImgpl" mode="widthFix" style="width: 100%;height: 100%;">
              </view>
              <view style="width: 100%;height: 100%;position: absolute;" class="textareaN" :style="{color:color}">
                {{name}}
              </view>
              <input class="textareaName" :style="{color:color}" maxlength="10" @confirm="setRemarks"
                @input="changeConName" :focus="focusN" @blur="handleNBlur"></input>
            </view>
          </view>
          <!-- 画布蒙层 -->
          <view style="width: 100%;height: 100%;position: absolute;top:0;z-index: 99;" v-if="cover"></view>
          <view :style="{backgroundImage:'url('+offImg+')'}" style="background-size: 100% 100%;" class="guanbi-btn111"
            @click="handleCaves" v-if="cover"></view>
          <view class="flipper" :class="{ flipped: isFlipped }">
            <view class="front">
              <view class="swipper-list">
                <zSwiper v-model="list" ref="zSwiper" :options="options" @slideChange="onChange">
                  <zSwiperItem :custom-style="slideCustomStyle" v-for="(item,index) in list" :key="index">
                    <image class="image" :src="item.KVimg" mode="aspectFill" @click="flip">
                    </image>
                  </zSwiperItem>
                </zSwiper>
              </view>
            </view>

            <!-- 反转内容 -->
            <view class="back" :style="{backgroundImage:'url('+backBg+')'}" @touchstart="onTouchStart"
              @touchend="onTouchEnd">
              <!-- 关闭按钮 -->
              <view :class="current == 1 ? 'guanbi-btn0':'guanbi-btn'" @click="flip" v-if="!cover">
                <image :src="offImg" mode="widthFix" style="width:100%;height: 50rpx;">
              </view>
              <!-- 文案 -->
              <view style="width: 396rpx;position: absolute;top: 30%;left: 25%;">
                <image :src="copywritingImg" mode="widthFix" style="width:100%;">
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 指示器 -->
      <view :class="isIphoneX?'indicator1624':'indicator1334'"
        style="width: 100%;display: flex;justify-content: center;align-items:center;" v-if="indicatorShow">
        <view style="width: 18rpx;height: 33rpx;;position: absolute;left: 34%;">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/left.png"
            mode="widthFix" style="width:100%;height: 33rpx;">
        </view>
        <view style="width: 18rpx;height: 33rpx;;position: absolute;right: 34%;">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/right.png"
            mode="widthFix" style="width:100%;height: 33rpx;">
        </view>
        <view style="width: 81rpx;height: 65rpx;">
          <image :src="indicator" mode="widthFix" style="width:100%;height: 100%;">
        </view>
      </view>
      <!-- 祝福语提示 -->
      <view :class="isIphoneX?'bless1624':'bless1334'" style="width: 531rpx;height: 36rpx;" v-if="!buttonShow">
        <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/huadong.png"
          mode="widthFix" style="width: 100%;height: 36rpx;">
      </view>
      <!-- 点击定制 -->
      <view :class="isIphoneX?'custom1624':'custom1334'" v-if="!cover">
        <view style="width: 376rpx;height: 90rpx;" @click="flip" v-if="buttonShow">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/kaiqidingzhi.png"
            mode="widthFix" style="width: 100%;height: 90rpx;">
        </view>
        <view style="width: 376rpx;height: 90rpx;" @click="handleInvite" v-else>
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/shencheng.png"
            mode="widthFix" style="width: 100%;height: 90rpx;">
        </view>
      </view>
      <!-- 生成邀请函封面 -->
      <view :class="isIphoneX?'Invitation1624':'Invitation1334'" style="width:631rpx;height: 694rpx;position: absolute;"
        v-if="cover" @longpress="bingLongTap">
        <image :src="coverUrl" mode="widthFix" style="width: 100%;height: 694rpx;">
      </view>
      <view :class="isIphoneX?'Invitation1624':'Invitation1334'"
        style="width:631rpx;height: 694rpx;position: absolute;z-index: 99;" v-if="coverMask">

      </view>
    </view>
    <!-- 时间选择器 -->
    <view class="popup" v-if="picker">
      <datePickers @onCancel="onCancel" @onConfirm="onConfirm"></datePickers>
    </view>
    <!-- canvas分享 -->
    <view class="share" style="opacity: 0;">
      <canvas style="width: 750rpx; height: 1670rpx;position: fixed;left: -50%;z-index:-1999;" type="2d"
        id="imgCanvas"></canvas>
    </view>
    <register-widget ref="registerWidgetRef" location="litha-invitation" />
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>
<script>
  import NavBar from '@/components/common/navbar';
  import zSwiper from './components/zebra-swiper/components/z-swiper/z-swiper'
  import zSwiperItem from './components/zebra-swiper/components/z-swiper-item/z-swiper-item'
  import datePickers from "./components/date-picker/components/date-pickers/date-pickers"
  import registerWidget from "@/components/register/register-widget.vue"
  import api from '@/api/api';
  import {
    CUSTOMER_INFO,
    MERCHANT_INFO,
  } from '@/utils/constant';
  export default {
    components: {
      navBar: NavBar,
      zSwiper: zSwiper,
      zSwiperItem: zSwiperItem,
      datePickers: datePickers,
      registerWidget
    },
    data() {
      return {
        // 组件所需的参数
        navbarData: {
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: 'invitation首页', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true,
          showSearchAndBack: 1,
          hideSearch: 1,
          whiteIcon: 1,
        },
        isIphoneX: false,
        startX: 0,
        endX: 0,
        slideCustomStyle: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: '36rpx'
        },
        options: {
          effect: 'cards'
        },
        list: [],
        isFlipped: false,
        current: 0,
        selectTitle: 0,
        buttonShow: true,
        indicatorShow: true,
        cover: false,
        coverMask: false,
        Toggle: false,
        preface: true,
        picker: false,
        time: '',
        Locations: '',
        name: '',
        canvasShow: false,
        canvasCtx: null,
        canvas: null,
        // 输入模块背景图
        indicator: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/5-1.png',
        backBg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/card-1.png',
        coverUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/canvas-fengmina1.png',
        fromImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/from.png',
        canvasCard1: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/canvans11.png',
        canvasCard2: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/canvas-fengmina1.png',
        fromName: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/from_baise1.png',
        canvasBg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/canvas1-bg.png',
        inputTextImgbg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0920/input.png',
        timeImgpl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/time-placehold.png',
        LocationImgpl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/didian.png',
        nameImgpl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/from-pl.png',
        offImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/guanbibtn.png',
        color: '#fff',
        //埋点下标
        trackIndex: 1,
        // 文案
        copywritingImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/copywriting1.png',
        num: 0,
        startX: 0,
        endX: 0,
        LocationShow: true,
        nameShow: true,
        isIos: false,
        inputShow: false,
        timeShow: true,
        LocationPlhord: true,
        fromPL: true,
        LocationInput: "",
        focus: false,
        focusN: false,
        imgLoadNum: 0,
        loadFinish: false,
        // 页面标识
        CMSNewsIdentifier: 'lithaInvitation',
        merchantId: '',
      };
    },

    onReady() {
      const query = wx.createSelectorQuery()
      query.select('#imgCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          const device = wx.getSystemInfoSync();
          this.canvas = res[0].node;
          this.canvasCtx = this.canvas.getContext('2d');
          const _scale = (device.windowWidth * device.pixelRatio) / 750;
          this.canvas.width = res[0].width * device.pixelRatio;
          this.canvas.height = res[0].height * device.pixelRatio;
          this.canvasCtx.scale(_scale, _scale);
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      var that = this;
      let systemInfomations = wx.getSystemInfoSync()
      if (systemInfomations.platform == 'ios') {
        that.isIos = true
      } else if (systemInfomations.platform == 'android') {
        that.isIos = false
      }
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }
    },
    async onLoad(option) {
      await this.$onLaunched;
      let that = this;
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
      that.merchantId = merchantInfo.cloudMerchantId;
      // 获取CMSNews配置信息
      that.getCMSPageNewsInfo(that.CMSNewsIdentifier, that.merchantId);
      let params = {
        path: '/pages/litha-launch/invitation/index',
        pageName: '邀请函页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })

      // 神策埋点
      this.$commonSensors.lithaTrack.crTrack("LandingPageView", {
        "page_name": "Interaction落地页",
        "refer_source": "活动页/Interaction",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "开启定制"
      })

      wx.loadFontFace({
        family: 'XinYiJiXiangSong',
        source: 'url("https://100000063-1252208446.file.myqcloud.com/fonts/Gotham/Fontquan-XinYiJiXiangSong-Regular.ttf")',
        scopes: ['webview', 'native'],
        success: res => {

        },
        fail: err => {

        }
      })

      // uni.showLoading({
      //   title: '加载中'
      // });
    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "邀请函",
        "view_progress": 1
      })
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      imgLoadFinish(e) {
        this.imgLoadNum++;
        if (this.imgLoadNum == 1) {
          uni.hideLoading();
          this.preface = true
        }
      },
      // 地点名字键盘输入失焦处理
      handleLocations() {
        this.focus = true
      },
      handleLBlur(e) {
        this.focus = false
      },

      handleNameF() {
        this.focusN = true
      },

      handleNBlur() {
        this.focusN = false
      },
      // 监听滑动事件
      onChange(swiper, index) {
        this.current = index
        this.indicatorFunction()
      },

      // 左右封面切换
      cutLeft() {
        if (this.current > 0) {
          this.current--
          this.indicatorFunction()
        }
      },
      cutRight() {
        if (this.current < 5) {
          this.current++
          this.indicatorFunction()
        }
      },
      // 指示灯图片切换
      indicatorFunction() {
        this.$refs.zSwiper.swiper.slideTo(this.current, 1000, true);
        this.indicator = this.list[this.current].indicator
      },

      // 生成邀请函
      flip() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'invitation',
          "c_event_category_2": 'Interaction',
          "c_click_area": 'pic/模板封面图片' + this.list[this.current].index,
        }
        wx.reportEvent("c_ebmp_draco_update_invitation_click_pic", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_invitation_click_pic', Params)
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "订阅邀请函",
          "operation_type": "点击",
          "button_name": this.list[this.current].index+"模版封面开启定制",
        })
        // 页面图片替换
        this.backBg = this.list[this.current].flipCradbg
        this.coverUrl = this.list[this.current].coverUrl
        this.canvasBg = this.list[this.current].canvasBg
        this.fromImg = this.list[this.current].fromImg
        this.copywritingImg = this.list[this.current].copywriting[this.current].src
        this.fromName = this.list[this.current].canvasName
        this.color = this.list[this.current].color
        this.timeImgpl = this.list[this.current].timePlaceholder
        this.LocationImgpl = this.list[this.current].LocationPlaceholder
        this.nameImgpl = this.list[this.current].namePlaceholder
        this.inputTextImgbg = this.list[this.current].inputTextImgbg
        this.offImg = this.list[this.current].OffImg
        this.isFlipped = !this.isFlipped;
        if (this.isFlipped) {
          setTimeout(() => {
            this.inputShow = true
          }, 280);
        } else {
          this.inputShow = false
        }
        this.selectTitle = this.isFlipped == true ? 1 : 0
        this.buttonShow = this.isFlipped == true ? false : true
        this.indicatorShow = this.isFlipped == true ? false : true
        this.Toggle = this.isFlipped == true ? true : false
      },

      // 左右文案切换
      handleCopywritingL() {
        if (this.num != 0) {
          this.num -= 1
        } else {
          this.num = this.list[this.current].copywriting.length - 1
        }
        this.copywritingImg = this.list[this.current].copywriting[this.num].src
      },

      handleCopywritingR() {
        if (this.num != this.list[this.current].copywriting.length - 1) {
          this.num += 1
        } else {
          this.num = 0
        }
        this.copywritingImg = this.list[this.current].copywriting[this.num].src
      },


      handleCaves() {
        this.cover = false
        this.Toggle = true
        this.selectTitle = 1
      },

      async handleInvite() {
        let that = this

        if (this.time && this.LocationInput && this.name) {
          if (this.nameShow && this.LocationShow) {
            let content = this.LocationInput + this.name;
            const accountInfo = uni.getAccountInfoSync()
            let appId = accountInfo.miniProgram.appId
            const checkText = await api.checkText({
              method: 'POST',
              header: {
                'Content-Type': 'application/json',
              },
              query: {
                content: content
              }
            }, appId);
            if (checkText.code == 1000) {
              let Params = {
                "campaign": 'SZSH_LITHA_LAUNCH-2023',
                "c_event_category_1": 'invitation',
                "c_event_category_2": 'Interaction',
                "c_click_area": 'pic/模板封面图片' + this.list[this.current].index,
              }
              wx.reportEvent("c_ebmp_draco_update_invitation_submit", {
                "eventdata": JSON.stringify(Params)
              })
              getApp().commonClTrack('c_ebmp_draco_update_invitation_submit', Params)

              // 神策埋点
              this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
                "page_name": "活动页",
                "campaign": 'SZSH_LITHA_LAUNCH-2023',
                "first_module_name": 'Interaction',
                "second_module_name": "订阅邀请函",
                "operation_type": "点击",
                "button_name": this.list[this.current].index+"模版封面提交",
              })

              uni.showLoading({
                title: '加载中'
              });
              that.mask = false
              that.cover = true
              this.coverMask = true
              that.selectTitle = 2
              that.Toggle = false
              that.onCanvasInit();
            } else {
              that.mask = true
              that.handleShowTextToast("含敏感文字，请修改");
            }
          } else {
            that.handleShowTextToast('输入内容包含不恰当内容')
          }
        } else {
          that.handleShowTextToast('请完善信息')
        }
      },

      onConfirm(e) {
        if (e) {
          this.time = e.date + '  ' + e.time
          this.picker = false
        }
      },

      onCancel(e) {
        if (!this.time) {
          this.timeShow = true
        }
        if (e.dateValue) {
          this.picker = false
        }
      },

      handlePickers() {
        this.picker = true
        this.timeShow = false
      },

      bingLongTap() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'invitation',
          "c_event_category_2": 'Interaction',
          "c_click_area": 'pic/模板封面图片' + this.list[this.current].index,
        }
        wx.reportEvent("c_ebmp_draco_update_invitation_save_pic", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_invitation_save_pic', Params)
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "订阅邀请函",
          "operation_type": "点击",
          "button_name": "长按保存邀请函图片"+this.list[this.current].index,
        })

        this.saveImg()
      },

      handlePreface() {
        this.preface = false
        this.loadFinish = true
        // 神策埋点
        this.$commonSensors.lithaTrack.crTrack("InteractionPageView", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "邀请函",
          "page_status": "加载完成"
        })
      },


      changeContext(e) {
        if (e.detail.value.length > 30) {
          this.LocationInput = e.detail.value.slice(0, 30)
        } else {
          this.LocationInput = e.detail.value
        }
        if (e.detail.value) {
          this.LocationPlhord = false
        } else {
          this.LocationPlhord = true
        }
        const regEx =
          /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
        if (regEx.test(e.detail.value)) {
          this.LocationShow = false
          this.handleShowTextToast("输入内容包含不恰当内容");
        } else {
          this.LocationShow = true
        }
      },

      changeConName(e) {
        if (e.detail.value.length > 10) {
          this.name = e.detail.value.slice(0, 10)
        } else {
          this.name = e.detail.value
        }
        if (e.detail.value) {
          this.fromPL = false
        } else {
          this.fromPL = true
        }

        const regEx =
          /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
        if (regEx.test(e.detail.value)) {
          this.nameShow = false
          this.handleShowTextToast("输入内容包含不恰当内容");
        } else {
          this.nameShow = true
        }
      },

      async setRemarksL(text, type) {
        let that = this;
        const accountInfo = uni.getAccountInfoSync()
        let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
        let inputValue = '';
        if (type == 'input') {
          inputValue = text;
        } else {
          inputValue = text.detail.value;
        }
        if (inputValue !== '' && inputValue !== undefined) {
          let content = inputValue;
          const accountInfo = uni.getAccountInfoSync()
          let appId = accountInfo.miniProgram.appId
          const checkText = await api.checkText({
            method: 'POST',
            header: {
              'Content-Type': 'application/json',
            },
            query: {
              content: content
            }
          }, appId);
          if (checkText.code == 1000) {
            
          } else {
            that.handleShowTextToast("含敏感文字，请修改");
          }
        }
      },

      async setRemarks(text, type) {
        let that = this;
        const accountInfo = uni.getAccountInfoSync()
        let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
        let inputValue = '';
        if (type == 'input') {
          inputValue = text;
        } else {
          inputValue = text.detail.value;
        }
        if (inputValue !== '' && inputValue !== undefined) {
          let content = inputValue;
          let customerInfo = uni.getStorageSync('uniLoginInfo') || getApp().globalData.customerInfo;
          if (!customerInfo || !customerInfo.openid) {
            await this.$commonFunction.commonUniLogin()
            customerInfo = uni.getStorageSync("uniLoginInfo")
            if(customerInfo?.openid && customerInfo?.unionId){
              that.$commonSensors.binduserid(customerInfo.openid, customerInfo.unionId)
            }
          }
          const accountInfo = uni.getAccountInfoSync()
          let appId = accountInfo.miniProgram.appId
          const checkText = await api.checkText({
            method: 'POST',
            header: {
              'Content-Type': 'application/json',
            },
            query: {
              content: content
            }
          }, appId);
          if (checkText.code == 1000) {
            that.mask = false
            
          } else {
            that.mask = true
            that.handleShowTextToast("含敏感文字，请修改");
          }
        }
      },


      /**canvas画图
       * @param {Object} e
       */
      async onCanvasInit() {
        try {
          this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height)
          //  背景图
          let bg = this.canvasBg;
          await this.drawImg(bg, 0, 0);
          // await this.drawImg(this.canvasCard1, 106, 78);

          //设置字体
          this.canvasCtx.font = '20px XinYiJiXiangSong'
          //把文字画上去，这个是文字坐标
          this.canvasCtx.fillStyle = this.color;
          this.canvasCtx.fillText(this.time, 242, 698);

          let size = ""
          let chr = this.LocationInput.split(""); //这个方法是将一个字符串分割成字符串数组
          let temp = "";
          let rowarr = [];

          for (let a = 0; a < chr.length; a++) {
            if (this.canvasCtx.measureText(temp).width < 309) {
              temp += chr[a];
            } else {
              a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
              rowarr.push(temp);
              temp = "";
            }
          }
          rowarr.push(temp);
          if (rowarr.length >= 2) {
            this.canvasCtx.fillText(rowarr[0], 242, 750);
            this.canvasCtx.fillText(rowarr[1], 242, 791);
          } else {
            this.canvasCtx.fillText(rowarr[0], 242, 750);
          }

          await this.drawImg(this.copywritingImg, 177, 380);

          await this.drawImg(this.fromName, 325, 850);

          const reg = /[^\u4E00-\u9FA5]/;
          if (reg.test(this.name) && this.name > 5) {
            size = '18px'
          } else {
            size = '28px'
          }

          this.canvasCtx.font = `italic ${size} XinYiJiXiangSong`;
          if (this.isIos) {
            this.canvasCtx.transform(1, Math.PI / -30, 0, 1, 0, 0);
            this.canvasCtx.rotate(Math.PI / 30);
            this.canvasCtx.fillText(this.name, 500, 865);
            this.canvasCtx.transform(1, 0, Math.PI / 30, 1, 0, 0);
            this.canvasCtx.rotate(0);
          } else {
            this.canvasCtx.fillText(this.name, 400, 870);
          }
          setTimeout(() => {
            uni.hideLoading();
            this.coverMask = false
          }, 3000)
        } catch (e) {
          
        }
      },
      /**
       *
       * 绘制图片
       * @param {Object} url
       * @param {Object} x
       * @param {Object} y
       */
      async drawImg(url, x, y) {
        return new Promise((resolve, reject) => {
          let img = this.canvas.createImage();
          img.src = url;
          img.onload = (e) => {
            this.canvasCtx.drawImage(img, x, y);
            resolve("绘制成功");
          };
          img.onerror = (e) => {
            resolve("绘制失败-图片加载失败");
          }
        });
      },
      /**
       * 保存图片到相册
       */
      saveImg() {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvas: this.canvas, //这里是重点，获取实例的时候保存为全局变量就行了
          success: (res) => {
            // 在H5平台下，tempFilePath 为 base64
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功'
                });
              },
              fail: () => {
                //已经拒绝授权，去到设置页面授权
                wx.showModal({
                  title: "未授权添加到相册",
                  content: "下载素材保存到相册，需打开添加到相册的权限开关",
                  confirmColor: "#00D2EC",
                  confirmText: "去设置",
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting({})
                    }
                  }
                })
              },
              complete: (res) => {
                
              }
            })
          },
          fail: () => {
            uni.showToast({
              icon: "fail",
              title: '保存失败'
            });
          }
        })
      },

      onTouchStart(e) {
        let _p = e.changedTouches || [];
        if (_p && _p[0]) {
          const _tp = _p[0];
          this.startX = _tp.clientX;
        }
      },
      onTouchEnd(e) {
        let _p = e.changedTouches || [];
        if (_p && _p[0]) {
          const _tp = _p[0];
          this.endX = _tp.clientX || 0;
          const _tn = this.endX - this.startX;
          if (_tn > 0 && Math.abs(_tn) >= 50) {
            if (this.num != this.list[this.current].copywriting.length - 1) {
              this.num += 1
            } else {
              this.num = 0
            }
            this.copywritingImg = this.list[this.current].copywriting[this.num].src
          } else if (_tn < 0 && Math.abs(_tn) >= 50) {
            if (this.num != 0) {
              this.num -= 1
            } else {
              this.num = this.list[this.current].copywriting.length - 1
            }
            this.copywritingImg = this.list[this.current].copywriting[this.num].src
          }
        }
      },


      /**
       * CMS配置news图及链接
       */
      getCMSPageNewsInfo: async function(identifier, merchantId) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantId || merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData,
            CMSItembannerImage = cmsConfigData[0];
          let newInfo = {}
          CMSItembannerImage[0].data.child.forEach((item, index) => {
            item.child.forEach((itm, idx) => {
              if (itm.dataName == 'KVimg') {
                newInfo.KVimg = itm.src
              }
              if (itm.dataName == 'indicator') {
                newInfo.indicator = itm.src
              }
              if (itm.dataName == 'flipCradbg') {
                newInfo.flipCradbg = itm.src
              }
              if (itm.dataName == 'coverUrl') {
                newInfo.coverUrl = itm.src
              }
              if (itm.dataName == 'fromImg') {
                newInfo.fromImg = itm.src
              }
              if (itm.dataName == 'timePlaceholder') {
                newInfo.timePlaceholder = itm.src
              }
              if (itm.dataName == 'LocationPlaceholder') {
                newInfo.LocationPlaceholder = itm.src
              }
              if (itm.dataName == 'namePlaceholder') {
                newInfo.namePlaceholder = itm.src
              }
              if (itm.dataName == 'OffImg') {
                newInfo.OffImg = itm.src
              }
              if (itm.dataName == 'canvasBg') {
                newInfo.canvasBg = itm.src
              }
              if (itm.dataName == 'canvasName') {
                newInfo.canvasName = itm.src
              }
              if (itm.dataName == 'inputTextImgbg') {
                newInfo.inputTextImgbg = itm.src
              }
              if (itm.dataName == 'color') {
                newInfo.color = itm.text
              }
              if (itm.dataName == 'copywriting') {
                newInfo.copywriting = itm.child
              }
              if (itm.dataName == 'index') {
                newInfo.index = itm.text
              }
            })
            that.list.push(newInfo)
            newInfo = {}
          })
        }
      },

      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/share.png'
        let path = '/pages/litha/litha'
        let title = '即刻定制麦卡伦专属邀请函，点亮新年团聚的浓情时刻'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				let title = '即刻定制麦卡伦专属邀请函，点亮新年团聚的浓情时刻'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return {
          title: title,
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/share.png'
        };
      },
    }
  };
</script>
<style>
  .invitation {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0103/BG.png');
    background-size: 100% 100%;
  }

  .invitation-swipper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .tips1624 {
    position: absolute;
    bottom: 1322rpx;
  }

  .tips1334 {
    margin-top: 150rpx;
  }

  .wallpaper-box {
    width: 560rpx;
    height: 916rpx;
    position: absolute;
    transform-origin: bottom;
  }

  .donghua {
    transition: transform 2s;
  }

  .swipper-list {
    width: 100%;
    height: 916rpx;
  }

  .image {
    width: 560rpx;
    height: 916rpx;
    border-radius: 24rpx;
  }

  .container1624 {
    width: 100%;
    background: none;
    position: absolute;
    bottom: 360rpx;
  }

  .container1334 {
    width: 100%;
    background: none;
    position: absolute;
    bottom: 185rpx;
  }

  .flip-container {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    position: relative;
    display: flex;
    justify-content: center;

  }

  .flipper {
    width: 100%;
    height: 930rpx;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }

  .front {
    position: absolute;
    width: 560rpx;
    height: 916rpx;
    margin-left: 95rpx;
    margin-top: 4rpx;
    backface-visibility: hidden;
  }

  .front {
    z-index: 2;
  }

  .back {
    width: 750rpx;
    height: 930rpx;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background-size: 100% 100%;
    position: relative;
  }

  .back1624 {
    /* margin-left: -12%; */
  }

  .back1334 {
    margin-left: -16%;
  }

  .flipped {
    transform: rotateY(180deg);
  }

  .guanbi-btn {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 19%;
    top: 4%;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/guanbibtn.png');
    background-size: 100% 100%;
    z-index: 9999;
  }

  .guanbi-btn0 {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 19%;
    top: 4%;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/guanbibtn.png');
    background-size: 100% 100%;
  }

  .guanbi-btn222 {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 19%;
    top: 4%;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/guanbi22.png');
    background-size: 100% 100%;
    z-index: 9999;
  }

  .guanbi-btn111 {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 19%;
    top: 4%;
    z-index: 9999;
  }

  .custom1624 {
    position: absolute;
    bottom: 142rpx;
  }

  .custom1334 {
    position: absolute;
    bottom: 25rpx;
  }

  .bless1624 {
    /* margin: 20rpx 0; */
    position: absolute;
    bottom: 302rpx;
  }

  .bless1334 {
    position: absolute;
    bottom: 145rpx;
  }

  .Invitation1624 {
    bottom: 3%;
  }

  .Invitation1334 {
    bottom: 1%;
  }

  .indicator1624 {
    /* margin: 23rpx 0 0; */
    position: absolute;
    bottom: 275rpx;
  }

  .indicator1334 {
    position: absolute;
    bottom: 139rpx;
  }

  .popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .preface-roll {
    width: 100%;
    height: 100%;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/01032/gitBG.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
  }

  .introduction-Wrap {
    position: absolute;
    bottom: 132rpx;
  }

  .preface-mask {
    width: 100%;
    height: 100%;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/kv.png');
    background-size: 100% 100%;
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
  }

  .baise {
    color: #fff;
  }

  .heise {
    color: #000;
  }

  .mask {
    width: 376rpx;
    height: 90rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .baise111 {
    background-color: #fff;
  }

  .heise222 {
    background-color: #858585;
  }

  .IOS {
    left: 17.5%;
    top: 35rpx;
    margin: 0 !important;
    padding: 0 !important;
  }

  .android {
    left: 19%;
    top: 42rpx;
  }

  .Cardbg {
    background-size: 100% 100%;
  }


  .textareaIpnut {
    width: 330rpx;
    height: 100rpx;
    line-height: 40rpx;
    position: absolute;
    right: 1000rpx;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }

  .textareaL {
    width: 330rpx;
    height: 100rpx;
    line-height: 40rpx;
    position: absolute;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }



  .textareaIpnuts {
    width: 300rpx;
    height: 40rpx;
    /* line-height: 20rpx; */
    position: absolute;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
    margin-left: 86rpx;
    margin-top: 22rpx;
  }

  .textareaIpnutss {
    width: 200rpx;
    height: 20rpx;
    line-height: 20rpx;
    position: absolute;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }

  .textareaTime {
    width: 343rpx;
    height: 35rpx;
    position: absolute;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }

  .IOStime {
    left: 18%;
    top: -13%;
  }

  .androidtime {
    left: 20%;
    top: -2%;
  }


  .textareaName {
    width: 230rpx;
    height: 35rpx;
    position: absolute;
    right: 1000rpx;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
    opacity: 0;
  }


  .textareaNamebox {
    width: 230rpx;
    height: 35rpx;
    position: absolute;
    left: 88rpx;
    top: 20rpx;
    font-size: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }

  .textareaN {
    font-size: 20rpx;
    font-style: italic;
    font-family: 'XinYiJiXiangSong';
  }

  .IOSName {
    left: 26%;
    top: 12rpx;
  }

  .androidName {
    left: 26%;
    top: 23rpx;
  }

  .TimeColoe1 {
    color: #fff;
  }

  .TimeColoe2 {
    color: #000;
  }

  .timeView {
    font-size: 20rpx;
    line-height: 20rpx;
    font-family: 'XinYiJiXiangSong';
  }
</style>
